<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点歌列表</title>
    <!-- 库文件 -->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/pako/2.0.3/pako.min.js"></script>
    <!-- main -->
    <script type="module" src="./main.js"></script>
    <!-- 配置文件 -->
    <script src="./webapi.js"></script>
    <!-- 总体样式文件 -->
    <link rel="stylesheet" href="./styles/main-page.css">
    <!-- 点歌面板样式 -->
    <link rel="stylesheet" href="./styles/order-table.css">
    <!-- 设置面板样式 -->
    <link rel="stylesheet" href="./styles/setting-page.css">
</head>

<body>
    <div class="main">
        <!-- 顶层提示弹窗 -->
        <div class="alertBox"></div>

        <!-- 进度条 -->
        <div class="progress">
            <div class="progress_bar">
                <i class="dot"></i>
            </div>
        </div>

        <!-- 点歌面板-->
        <table class="orderTable">
            <!-- 菜单栏 -->
            <thead>
                <th>歌名</th>
                <th>歌手</th>
                <th>点歌人</th>
            </thead>
            <!-- 点歌列表 -->
            <tbody id="orderList"></tbody>
        </table>

        <!-- 设置面板 -->
        <div class="setting">
            <div id="menu" class="setting_menu">
                <button class="setting_btn">登录设置</button>
                <button class="setting_btn">点歌设置</button>
                <button class="setting_btn">弹幕设置</button>
                <button class="setting_btn">关于</button>
                <button id="upBtn">↑</button>
            </div>
            <div class="setting_body">
                <div id="pages" class="setting_pages">
                    <!-- 登录设置 -->
                    <table class="setting_login_page">
                        <tr>
                            <td>音乐平台</td>
                            <td>
                                <select id="musicPlatformSelect">
                                    <option value="wy">网易云音乐</option>
                                    <option value="qq">QQ音乐</option>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3">
                                <div class="login_container">
                                    <div id="loginForm">
                                        <!-- 网易云扫码登录 -->
                                        <div class="qr_login">
                                            <img id="qrImg">
                                            <button id="qrButton">刷新二维码</button>
                                        </div>
                                        <!-- QQ音乐cookie登录 -->
                                        <div class="ck_login">
                                            <input id="qqNumber" type="text" placeholder="请输入QQ号">
                                            <textarea id="ckText" placeholder="请输入cookie"></textarea>
                                            <button id="ckButton">设置cookie</button>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>空闲歌单ID</td>
                            <td><input type="text" id="songListId" autocomplete="off"></td>
                            <td><button id="loadSongList">加载歌单</button></td>
                        </tr>
                        <tr>
                            <td>历史空闲歌单</td>
                            <td><select id="songListHistory" size="4"></select></td>
                            <td><button id="selectSongList">选择歌单</button></td>
                        </tr>
                    </table>

                    <!-- 点歌设置-->
                    <table class="setting_order_page">
                        <tbody>
                            <tr class="input">
                                <td>用户点歌数</td>
                                <td><input type="number" id="userMaxOrder" autocomplete="off"></td>
                            </tr>
                            <tr class="input">
                                <td>最大点歌数</td>
                                <td><input type="number" id="globalMaxOrder" autocomplete="off"></td>
                            </tr>
                            <tr class="input">
                                <td>最大歌曲时长</td>
                                <td><input type="number" id="orderMaxDuration" autocomplete="off"></td>
                            </tr>
                            <tr class="input">
                                <td>超时限播时长</td>
                                <td><input type="number" id="overLimitSkip" autocomplete="off"></td>
                            </tr>
                            <tr class="select">
                                <td>历史点歌用户</td>
                                <td><select id="userHistory" size="4"></select></td>
                                <td><button id="addUserBlack">加入黑名单</button></td>
                            </tr>
                            <tr class="select">
                                <td>用户黑名单</td>
                                <td>
                                    <select id="userBlackList" size="4">
                                    </select>
                                </td>
                                <td><button id="delUserBlack">移除黑名单</button></td>
                            </tr>
                            <tr class="select">
                                <td>历史点歌歌曲</td>
                                <td><select id="songHistory" size="4"></select></td>
                                <td><button id="addSongBlack">加入黑名单</button></td>
                            </tr>
                            <tr class="select">
                                <td>歌曲黑名单</td>
                                <td>
                                    <select id="songBlackList" size="4">
                                    </select>
                                </td>
                                <td><button id="delSongBlack">移除黑名单</button></td>
                            </tr>
                        </tbody>
                    </table>

                    <!-- 弹幕设置 -->
                    <table class="setting_danmu_page">
                        <tbody>
                            <tr>
                                <td>直播平台</td>
                                <td>
                                    <select name="" id="danmuPlatformSelect">
                                        <option value="bilibili">B站</option>
                                        <option value="douying">抖音</option>
                                        <option value="douyu">斗鱼</option>
                                    </select>
                                </td>
                                <td><button id="danmuPlatformButton">切换/重连</button></td>
                            </tr>
                        </tbody>
                    </table>

                    <!-- 关于 -->
                    <div class="setting_about_page">
                        <p>Hello world</p>
                    </div>
                    </di>
                </div>
            </div>
        </div>
</body>

</html>